@import '@/styles/index.scss';

.userInfo-page {
	position: relative;
	width: 100%;
	padding-top: $pd;

	.canvas {
		position: absolute;
		top: -500rpx;
		left: -500rpx;
		opacity: 0;
		z-index: -1;
		visibility: hidden;
	}

	.list {
		position: relative;
		background-color: #fff;
		padding: 0 $pd;
		margin-bottom: $pd;
		z-index: 2;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			@include focused($bdc, $fc-on);

			.title {
				position: relative;
				width: 180rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 20rpx;
				text-align: center;
				font-size: $fsm;
				color: $fc;
				text-align: left;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;

				&.require::after {
					position: absolute;
					top: 0;
					left: 0;
					content: '*';
					display: block;
					color: red;
					bottom: 0;
				}
			}

			.content {
				position: relative;
				flex: 1;
				min-height: 50rpx;
				max-height: 200rpx;
				font-size: $fsm;
				color: $fc;
				overflow: hidden;

				.input-item {
					line-height: 50rpx;
					font-size: $fsm;
					color: $fc;
				}

				.text {
					line-height: 50rpx;
					word-wrap: break-word;
					word-break: break-all;
					white-space: pre-wrap;
				}

				.textarea {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					line-height: 50rpx;
					background-color: #fff;
				}

				.logo-box {
					display: flex;
					align-items: center;

					.logo {
						width: 120rpx;
						height: 120rpx;
						overflow: hidden;

						.image {
							display: inline-block;
							vertical-align: top;
							width: 100%;
							height: 100%;
						}
					}

					.btn {
						background-color: $fc-on;
						color: #fff;
						padding: 10rpx 20rpx;
						margin-left: $pd;
						border-radius: 40rpx;
						font-size: $fss;
						cursor: pointer;
					}
				}
			}

			.icon {
				width: 50rpx;
				height: 50rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.button {
		padding: $pd;

		.btn {
			font-size: $fsm;
			color: #fff;
			background-color: $fc-on;
			border-color: $fc-on;
			@include button;
		}
	}
}
